<template>
  <view class="list-container">
    <view class="list">
      <view
        class="item-container"
        v-for="carNumber in carNumberList"
        :key="carNumber.id"
        @click="toPayPage(carNumber.carNumber)"
      >
        <view class="title-container">
          <view class="title">{{ carNumber.carNumber }}</view>
        </view>
<!--        <view class="action-container">-->
<!--          <view class="edit-btn" @click="toEditPage(carNumber.id)">-->
<!--            <i class="iconfont icon-xiugai"></i>-->
<!--          </view>-->
<!--          <view class="delete-btn" @click="deleteCarNumber(carNumber.id)">-->
<!--            <i class="iconfont icon-chushaixuanxiang"></i>-->
<!--          </view>-->
<!--        </view>-->
        <view class="action-container">
          <view style="color: blue">
            <i class="iconfont icon-sousuo"></i>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  data() {
    return {
      carNumberList: []
    };
  },
  mounted() {
    this.getCarNumberList();
  },
  methods: {
    getCarNumberList() {
      this.$mainApi.apiGetCarNumberList().then((res) => {
        this.carNumberList = res.data.records;
      });
    },
    toEditPage(id: any) {
      location.href = "/#/pages/parking/plate?id=" + id;
    },
    // deleteCarNumber(id: any) {
    //   uni.showModal({
    //     title: "删除车牌号",
    //     content: "确认删除车牌号码，此操作不可逆",
    //     success: (result: UniApp.ShowModalRes) => {
    //       if (result.confirm) {
    //         uni.showToast({ title: "正在删除车牌号" });
    //         this.$mainApi.apiDeleteCarNumber(id).then(() => {
    //           uni.hideToast();
    //           this.getCarNumberList();
    //         });
    //       }
    //     },
    //   });
    // },
    toPayPage(carNumber: any) {
      uni.showLoading({
        title: '账单查询中...'
      });

      this.$mainApi.apiPayParkOrder(carNumber).then((result) => {
        console.log(result);
        if (!result) {
          console.log(1);
          uni.showToast({ title: "所有停车场未找到该车牌" });
          return;
        }
        console.log(0);
        location.href = result.data;
      });
    }
  },
});
</script>
<style scoped>
.list-container {
  width: 100vw;
  height: 100vh;
  background-color: #f0f0f0;
}

.list-container .list {
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.item-container {
  display: flex;
  margin-bottom: 15px;
  padding: 15px;
  background-color: #fff;
  border-radius: 12px;
}

.item-container .title-container {
  flex-grow: 1;
  font-size: 16px;
}

.item-container .action-container {
  font-size: 16px;
  width: 70px;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
}

.item-container .action-container .edit-btn {
  color: #007aff;
  margin-right: 20px;
}

.item-container .action-container .delete-btn {
  color: #dd524d;
}
</style>
